<template>
  <div class="max">
    <sapn class="date">2019年9月</sapn>
    <div class="message">
      <div class="m1">
        <div class="cz">
          <p class="xx">储值卡充值</p>
        </div>
        <span class="time">2019-09-16 &nbsp; 12:00</span>
        <p class="much">+500.00</p>
      </div>
      <div class="m1">
        <div class="cz">
          <p class="xx">外卖三人盖饭套餐</p>
        </div>
        <span class="time">2019-09-09 &nbsp; 17:20</span>
        <p class="much1">-60.00</p>
      </div>
      <div class="m1">
        <div class="cz">
          <p class="xx">食堂下单</p>
        </div>
        <span class="time">2019-09-08 &nbsp; 18:56</span>
        <p class="much1">-60.00</p>
      </div>
      <div class="m1">
        <div class="cz">
          <p class="xx">外卖三人盖饭套餐</p>
        </div>
        <span class="time">2019-09-60.00-06 &nbsp; 12:30</span>
        <p class="much1">-60.00</p>
      </div>
    </div>
    <sapn class="date">2019年8月</sapn>
    <div class="message">
      <div class="m1">
        <div class="cz">
          <p class="xx">外卖单人盖饭套餐</p>
        </div>
        <span class="time">2019-09-16 &nbsp; 12:00</span>
        <p class="much1">-20.00</p>
      </div>
      <div class="m1">
        <div class="cz">
          <p class="xx">外卖三人盖饭套餐</p>
        </div>
        <span class="time">2019-09-09 &nbsp; 17:20</span>
        <p class="much1">-60.00</p>
      </div>
      <div class="m1">
        <div class="cz">
          <p class="xx">食堂下单</p>
        </div>
        <span class="time">2019-09-08 &nbsp; 18:56</span>
        <p class="much1">-60.00</p>
      </div>
      <div class="m1">
        <div class="cz">
          <p class="xx">外卖三人盖饭套餐</p>
        </div>
        <span class="time">2019-09-60.00-06 &nbsp; 12:30</span>
        <p class="much1">-60.00</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },

  components: {},

  methods: {},

  created() {
    // let app = getApp()
  }
};
</script>
<style>
html {
  background: #eee;
}

.max {
  display: flex;
  flex-direction: column;
}

.date {
  font-size: 17px;
  font-family: "Source Han Sans CN";
  font-weight: 400;
  color: rgba(53, 52, 52, 1);
  line-height: 48px;
  margin: 10px 0 0 13px;
}

.message {
  width: 100%;
  height: 272px;
  background: white;
  display: flex;
  flex-direction: column;
}

.m1 {
  position: relative;
  width: 343px;
  height: 68px;
  border-bottom: 1px solid #eee;
  margin-left: 12px;
}

.cz {
  width: 113px;
  height: 13px;
  margin: 20px 0 9px 0;
}

.xx {
  font-size: 14px;
  font-family: "Source Han Sans CN";
  font-weight: 400;
  color: rgba(53, 52, 52, 1);
  line-height: 13px;
}

.time {
  font-size: 12px;
  font-family: "Source Han Sans CN";
  font-weight: 400;
  color: rgba(163, 165, 168, 1);
  /* line-height: 17px; */
}

.much {
  position: absolute;
  right: 5px;
  top: 10px;
  font-size: 17px;
  font-family: "Source Han Sans CN";
  font-weight: 400;
  color: rgba(219, 90, 51, 1);
  line-height: 48px;
}

.much1 {
  position: absolute;
  top: 10px;
  right: 5px;
  font-size: 17px;
  font-family: "Source Han Sans CN";
  font-weight: 400;
  color: rgba(2, 2, 2, 1);
  line-height: 48px;
}
</style>
